<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:42
 * @LastEditTime: 2020-08-27 21:54:00
 * @LastEditors: 马卓
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\components\checkpaper\PaperDetail.vue
-->
<template>
  <div>
    <h2 class="h2">添加试题</h2>
    <Card style="width:100%">
      <h3>题目信息</h3>
      <h3>题干</h3>
      <Input
        v-model="addForm.questions_stem"
        maxlength="20"
        size="large"
        placeholder="请输入题目标题，不超过20个字"
        style="width: 400px"
      />
      <h3 class="zhu">题目主题</h3>
      <editor-bar v-model="addForm.title" :isClear="isClear" @on-change="change"></editor-bar>
      <Col class="col">
        <Row>请选择考试类型：</Row>
        <Row>
          <Select v-model="addForm.exam_id" style="width:200px">
            <Option
              v-for="item in ExamType"
              :value="item.exam_id"
              :key="item.exam_id"
            >{{item.exam_name}}</Option>
          </Select>
        </Row>
      </Col>
      <Col class="col">
        <Row>请选择课程类型：</Row>
        <Row>
          <Select v-model="addForm.subject_id" style="width:200px">
            <Option
              v-for="item in Subject"
              :value="item.subject_id"
              :key="item.subject_id"
            >{{item.subject_text}}</Option>
          </Select>
        </Row>
      </Col>
      <Col class="col">
        <Row>请选择题目类型：</Row>
        <Row>
          <Select class="select" v-model="addForm.questions_type_id" style="width:200px">
            <Option
              v-for="item in QuestionsType"
              :value="item.questions_type_id"
              :key="item.questions_type_id"
            >{{item.questions_type_text}}</Option>
          </Select>
        </Row>
      </Col>
      <Col class="col">
        <Row>答案信息</Row>
        <Row>
          <editor-bar v-model="addForm.questions_answer" :isClear="isClear2" @on-change="change2"></editor-bar>
        </Row>
      </Col>
      <Button type="primary" @click="submit">提交</Button>
    </Card>
  </div>
</template>

<script>
import EditorBar from '../wangEnduit/wangEnduit'
import { mapActions, mapState } from 'vuex'
export default {
  components: { EditorBar },
  data() {
    return {
      isClear: false,
      isClear2: false,
      addForm: {
        questions_stem: '', // 题目主干
        title: '', // 题目主题富文本输入内容
        questions_answer: '', // 题目答案
        exam_id: '',
        subject_id: '',
        questions_type_id: '',
        user_id: window.sessionStorage.getItem('user_id')
      }
    }
  },
  computed: {
    ...mapState('AddQuest', ['ExamType', 'Subject', 'QuestionsType'])
  },
  methods: {
    ...mapActions('AddQuest', ['setAll', 'addQ']),
    // 题目主题输入内容
    change(val) {
      this.addForm.title = val
    },
    // 题目信息输入内容
    change2(val) {
      this.addForm.questions_answer = val
    },
    // 添加试题
    submit() {
      this.addQ(this.addForm)
      this.addForm = {}
    }
  },
  created() {
    this.setAll()
  }
}
</script>

<style lang="scss" scoped>
.h2 {
  padding: 20px 5px;
}
.zhu {
  margin-top: 25px;
}
.col {
  margin: 25px 0;
}
</style>
